<template>
  <div>
    <el-dialog
      title="模板新增"
      :visible.sync="dialogVisible"
      width="60%"
      :showClose="false"
     >
      <div>
        <div style="display: flex; justify-content: space-between;">
          <div >
            <template>
            <el-form :model="form" :rules="rules" ref="form">
              <el-form-item label="采集设备:" prop="iotDeviceId">
              <el-select v-model="form.iotDeviceId" clearable filterable :rows="2"  placeholder="采集设备" @change="changeselect"  size="small" style="margin-right: 10px; width: 150px;" >
                <el-option class="select" v-for="(item,index) in xlalalist" :key="index" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="测点回路:" prop="itemLoop">
              <el-select v-model="form.itemLoop" clearable   placeholder="测点回路"   size="small" style="margin-right: 10px;width: 150px;" >
                <el-option class="select" v-for="(item,index) in xlalalists" :key="index" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="测点分组:" >
              <el-select v-model="form.itemGroup" clearable   placeholder="测点分组"   size="small" style="margin-right: 10px;width: 150px;" >
                <el-option class="select" v-for="(item,index) in fenzulist" :key="index" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            </el-form>
            </template>
          </div>
          <div><button class="chaxun" @click="chaxun" style=" cursor: pointer;">查询</button></div>
        </div>
        <div>
          <template>
            <el-table
              ref="multipleTable"
              :data="tableData"
              border
              height="500"
              :cell-style="{'text-align':'center'}"
            :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                label="测点回路"
                prop="itemLoops">
                <template #default="{row}">
              <span>{{ row.itemLoops==='0'?'默认'
              :row.itemLoops==='1'?'回路一'
              :row.itemLoops==='2'?'回路二'
              :row.itemLoops==='3'?'回路三'
              :row.itemLoops==='4'?'回路四'
              :row.itemLoops==='5'?'回路五'
              :row.itemLoops==='6'?'回路六'
              :row.itemLoops==='7'?'回路七':'回路八' }}</span>
            </template>
              </el-table-column>
              <el-table-column
                prop="itemTag"
                label="测点标识"
               >
              </el-table-column>
              <el-table-column
                prop="itemName"
                label="测点名称"
                >
              </el-table-column>
              <el-table-column
                label="测点地址"
                prop="dataAddress">
              </el-table-column>
              <el-table-column
                prop="dataRate"
                label="倍率"
               >
              </el-table-column>
              <el-table-column
                prop="convertType"
                label="转换公式"
                >
                <template #default="{row}">
                  <span>{{ row.convertType==='CT'?'电流变比转换'
                  :row.convertType==='PT'?'电压变比转换':'电流电压变比转换' }}</span>
                  </template>
              </el-table-column>
              <el-table-column
                prop="itemGroup"
                label="测点分组"
                >
                <template #default="{row}">
                <span>{{ row.itemGroup==='1'?'负荷信息'
                :row.itemGroup==='0'?'工况遥信'
                :row.itemGroup==='6'?'电能信息'
                :row.itemGroup==='8'?'环境信息'
                :row.itemGroup==='9'?'电能质量'
                :row.itemGroup==='7'?'电网矢量'
                :row.itemGroup==='2'?'控制信息'
                :row.itemGroup==='20'?'水热信息':'其他'}}</span>
              </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <span slot="footer" class="bitton">
        <button class="sure" type="primary" @click="submit" style=" cursor: pointer;">确 定</button>
        <button @click="quxiao" style=" cursor: pointer;">取 消</button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getsbxialaapi, getyiqilistapi, getxinmubanapi } from '@/api/device'
import { cdhlxialaapi } from '@/api/measure'
import { getxialafenzuapi } from '../../api/eventtype.js'
export default {
  name: 'MaintenanceMubanxin',
  props: {
    row: { type: Object },
    value:{type: String}
  },
  data () {
    return {
      xlalalist: [],
      xlalalists: [],
      fenzulist: [],
      dialogVisible: false,
      tableData: [],
      form: {itemGroup:'',iotDeviceId:'',itemLoop:''},
      rules: {
        iotDeviceId: [
          { required: true, message: '采集设备必选', trigger: 'blur' }
        ],
        itemLoop: [
          { required: true, message: '测点回路必选', trigger: 'blur' }
        ]
      },
      templateId: [],
      number: ''
    }
  },

  async mounted () {
    // const res = await getsbxialaapi({ deviceId: '30604' })
    // this.xlalalist = res.data.list
    const ress = await cdhlxialaapi({ dictType: 'MeasureLoop' })
    this.xlalalists = ress.data.list
    this.form.itemLoop=ress.data.list[0].value
    const resss = await getxialafenzuapi({ dictType: 'MeasurementKind' })
    this.fenzulist = resss.data.list
    // this.form.itemGroup=resss.data.list[0].value
  },

  methods: {
    handleSelectionChange (val) {
      this.templateId = val.map(ele => ele.id)
      console.log(this.templateId)
    },
    async chaxun () {
      await this.$refs.form.validate()
      const res = await getyiqilistapi(this.form)
      this.tableData = res.data.list
    },
    changeselect (val) {
      this.number = val
    },
    async submit () {
      if (!this.form.iotDeviceId) return this.$message.warning('请先选择采集设备和模板')
      const res = await getxinmubanapi({ deviceId: this.row.id, iotDeviceId: this.form.iotDeviceId, templateId: this.templateId })
      this.dialogVisible = false
      this.$emit('shuxing')
      this.$refs.multipleTable.clearSelection()
      if (res.code === 200) return this.$message.success('新增成功')
    },
    quxiao() {
      this.dialogVisible = false
      this.$refs.multipleTable.clearSelection()
  }
  },
  watch: {
    async value(val) {
      if (val) {
        try {
          const res = await getsbxialaapi({ deviceId: val })
          this.xlalalist = res.data.list
        this.form.iotDeviceId=res.data.list[0].value
        } catch (error) {
          this.xlalalist=[]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bitton button{
  width: 63px;
  height: 32px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.sure{
  margin-right: 10px;
  background-color: #169bd5 !important;
  color: #fff;
}
::v-deep .el-form-item {
  display: inline-block;
}
::v-deep .el-form-item__content {
  display: inline-block;
}
.chaxun{
  width: 63px;
  height: 32px;
  background-color: #169bd5 !important;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-top: 4px;
}
</style>
